<template>
  <div>
    <NavBar />
    <div class="main-content">
      <div class="container">
        <h2>个人信息</h2>
        <form @submit.prevent="submitForm" class="demand-form">
          <div class="form-group">
            <label for="card">校园卡号:</label>
            <input type="text" id="card" v-model="info.card" required readonly/>
          </div>
          <div class="form-group">
            <label for="name">姓名:</label>
            <input type="name" id="name" v-model="info.name" required readonly/>
          </div>
          <div class="form-group">
            <label for="academy">所属学院:</label>
            <input type="academy" id="academy" v-model="info.academy" required min="1"/>
          </div>
          <div class="form-group">
            <label for="grade">所属年级:</label>
            <input type="grade" id="grade" v-model="info.grade" required />
          </div>
          <div class="form-group">
            <label for="tel">联系方式:</label>
            <input type="tel" id="tel" v-model="info.tel" required />
          </div>
          <div class="form-group">
            <label for="password">密码:</label>
            <input type="password" id="password" v-model="info.password" required />
          </div>
          <button type="submit" class="submit-button">提交修改</button>
        </form>
      </div>
    </div>
  </div>
</template>
    
<script setup>
import NavBar from './NavBar.vue'
import { ref,onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router';

const router = useRouter();

const info = ref({
  card: '',
  name: '',
  academy: '',
  grade: '',
  tel: '',
  password: '',
})

onMounted(() => {
  info.value.card = localStorage.getItem('userID');
  getInfo();
});

const getInfo = async () => {
  try {
    const response = axios.get(`http://localhost:8080/stuinfo?card=${info.value.card}`);
    response.then( res => {
        info.value.name = res.data.name;
        info.value.academy = res.data.academy;
        info.value.grade = res.data.grade;
        info.value.tel = res.data.tel;
        info.value.password = res.data.password;
    })
  } catch (error) {
    console.log(error)
    alert('获取信息失败')
  }
}

const submitForm = () => {
  const formData = new URLSearchParams();
  for (const [key, value] of Object.entries(info.value)) {
    formData.append(key, value);
  }
  try {
    const response = axios.post('http://localhost:8080/stuinfo', formData);
    response.then( res => {
      if(res.data.success){
        alert('提交成功，请重新登录')
        router.push('/user-login');
      }else{
        alert('提交失败, 请重试')
      }
    })
  } catch (error) {
    console.log(error)
    alert('提交失败')
  }
}

</script>

<style scoped>
  .container {
  max-width: 700px;
  margin: 50px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
}
h1 {
  color: #333;
  margin-bottom: 20px;
}
h2 {
  color: #333;
  margin-bottom: 15px;
}

.demand-form {
display: flex;
flex-direction: column;
}

.form-group {
margin-bottom: 15px;
}

.form-group select {
width: 82.5%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input {
width: 80%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.submit-button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}

.submit-button:hover {
background-color: #45a049;
}

.register-link {
    display: inline-block;
    margin-top: 20px;
    color: #5cb85c;
    text-decoration: none;
    font-size: 14px;
  }
  
  .register-link:hover {
    text-decoration: underline;
  }
</style>